.cartas {
            position: relative;
            float: left;
            width: 25%;
            height: 33%;
        }
        
        .imagens {
            position: relative;            
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
        .topo{
            position: absolute;
            width:30%;
            height: 10%;
            left: 35%;
            top:0%;   
            align-items: center;
            border: 1px solid black;
            float:left;
            background: rgba(0, 0, 0, 0.527);;

        }
        
        .principal {
            position: absolute;
            width: 30%;
            height: 90%;
            left: 35%;
            top:10%;     
            border: 1px solid black;
            background: rgba(0, 0, 0, 0.527);;

            
      
        }
        .lateral{
            position: absolute;
            width: 10%;
            height: 500px;            
            top:10%;     
            border: 1px solid black; 
            background: rgba(0, 0, 0, 0.527);;
        }
        h1{
            font-size: 2rem;
            text-align: center;
            color: white;
        }
        h2{
            font-size: 2em;
            text-align: center;
        }
        .menu_lateral{
           width: 10%;
           height: 100%;
           top:0%;     

        }
       
.vertical-menu {
    width: 19%;
}

.vertical-menu a {
    background-color: rgba(0, 0, 0, 0.527);
    color:white;
    display: block;
    padding: 12px;
    text-decoration: underline;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.vertical-menu a:hover {
    background-color: gray;
}

.vertical-menu a.active {
    background-color: darkgreen;
    color: white;
}